goog.require('extension.images.BrowserAction');
goog.require('extension.Settings');
goog.require('goog.net.ImageLoader');
goog.require('goog.events.EventType');

goog.provide('extension.browser.BrowserAction');






/** Provides functionality of the browser action
 * @constructor  
 */
extension.browser.BrowserAction = function() {
  
  this.context_ = document.createElement('canvas').getContext('2d');
  
  this.setColor('#900');
  
  this.loadFrames_();
};
goog.addSingletonGetter(extension.browser.BrowserAction);







// BrowserAction implementation
goog.scope(function(){ 

  // Make aliases for the namespaces.
  var BrowserAction = extension.browser.BrowserAction;
  var ImageLoader = goog.net.ImageLoader;
  var Settings = extension.Settings;
  
  /**
  * @const 
  * @type {number}
  */
  BrowserAction.ICONSIZE = 19;
  
  
  // fields
  BrowserAction.prototype.context_ = null; // for the drawing functions
  BrowserAction.prototype.frames_ = [];
  BrowserAction.prototype.animation_ = 0;
  BrowserAction.prototype.currFrame_ = 0;
  BrowserAction.prototype.stopAnimation_ = false;
  
  
  
  /** Sets the color of the icon.
   * 
   * @param {string} color The desired color in CSS format.
   */
  BrowserAction.prototype.setColor = function (color) {
    for(var i = 0; i < this.frames_.length; i++) {
      this.context_.clearRect(0, 0, BrowserAction.ICONSIZE , BrowserAction.ICONSIZE);
      
      this.context_.putImageData(this.frames_[i], 0, 0);
      
      this.context_.globalCompositeOperation = 'source-in';
      this.context_.fillStyle = color;
      this.context_.fillRect(0, 0, BrowserAction.ICONSIZE, BrowserAction.ICONSIZE );
      
      this.frames_[i] = this.context_.getImageData(0, 0, BrowserAction.ICONSIZE, BrowserAction.ICONSIZE);
    }
    
    // TODO: set badge color.
  };
  
  
  /** Loads the frames for the browseraction animation.
   * @private
   * 
   * @return undefined
   */
  BrowserAction.prototype.loadFrames_ = function () {
    var frameUrls = extension.images.BrowserAction.getFrames();
    var loader = new ImageLoader();
    
    var loaded = 0;
    
    // add the image to the frames collection after loading.
    loader.addEventListener(goog.events.EventType.LOAD, function (e) {
      
      this.context_.clearRect(0, 0, BrowserAction.ICONSIZE, BrowserAction.ICONSIZE);
      this.context_.drawImage(e.target, 0, 0, BrowserAction.ICONSIZE, BrowserAction.ICONSIZE);
      
      this.frames_[e.target.id] = this.context_.getImageData(0, 0, BrowserAction.ICONSIZE, BrowserAction.ICONSIZE);
      loaded += 1;
      
      if(loaded === frameUrls.length) {
        // All images are loaded.
        window.console.log('loaded');
      }
    }, true, this);
    
    for(var i = 0; i < frameUrls.length; i++) {
      loader.addImage(i + '', frameUrls[i]);
    }
    
    loader.start();
  };
  
  
  
  /** Starts the loading animation.
   * 
   * @return undefined
   */
  BrowserAction.prototype.startLoadingAnimation = function () {
    
    this.stopAnimation_ = false;
      
    if(!this.animation_) {
      // Only start animation when no animation is busy.
      
      this.animation_ = setInterval(goog.bind(function () {
        
        // Advance the current frame and draw the icon. 
        this.currFrame_ += 1;
        if(this.currFrame_ >= this.frames_.length) {
          this.currFrame_ = 0;
          
          // Stop the animation if requested.
          if(this.stopAnimation_) {
            clearInterval(this.animation_);
            this.animation_ = undefined
          }
        }
        
        chrome.browserAction.setIcon({imageData: this.frames_[this.currFrame_]});
        
      }, this), Settings.getBrowserActionAnimationInterval());
    }
    
  };
  
  
  /** Stops the loading animation.
   * 
   * @return undefined
   */
  BrowserAction.prototype.stopLoadingAnimation = function () {
    this.stopAnimation_ = true;
  };
  
  

});